logo icon
ธนินัชดอทคอม - รับสร้าง Website, Mobile Application
image

บทความ

ธนินัช ดอทคอม - ผู้เชี่ยวชาญทำเว็บไซต์

Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET 

การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET   ใน Dio package สามารถทำได้ดังนี้

ตัวอย่างที่ 1 :

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class ApiExample extends StatefulWidget {
  @override
  _ApiExampleState createState() => _ApiExampleState();
}

class _ApiExampleState extends State<ApiExample> {
  List<dynamic> _posts = [];

  @override
  void initState() {
    super.initState();
    _fetchPosts();
  }

  Future<void> _fetchPosts() async {
    try {
      final dio = Dio(BaseOptions(
        baseUrl: 'https://jsonplaceholder.typicode.com',
        connectTimeout: 5000, // 5 seconds
        receiveTimeout: 5000, // 5 seconds
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
      ));

      final response = await dio.get('/posts', queryParameters: {
        'userId': 1,
      }, options: Options(
        headers: {
          'Authorization': 'Bearer token',
        },
      ));

      if (response.statusCode == 200) {
        setState(() {
          _posts = response.data;
        });
      } else {
           ScaffoldMessenger.of(context).showSnackBar(
             SnackBar(content: Text('Error fetching posts')),
           );
      }

    } catch (error) {
      //print('Error fetching posts: $error');
       ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error fetching posts: $error')),
       );

    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('API Example'),
      ),
      body: ListView.builder(
        itemCount: _posts.length,
        itemBuilder: (BuildContext context, int index) {
          final post = _posts[index];
          return ListTile(
            title: Text(post['title']),
            subtitle: Text(post['body']),
          );
        },
      ),
    );
  }
}

 

ในตัวอย่างโค้ดข้างต้น ฟังก์ชัน _fetchPosts จะกำหนด options ด้วย BaseOptions ซึ่งระบุค่าเช่น baseUrl, connectTimeout, receiveTimeout, และ headers สำหรับการเชื่อมต่อ API ดังนี้

final dio = Dio(BaseOptions(
  baseUrl: 'https://jsonplaceholder.typicode.com',
  connectTimeout: 5000, // 5 seconds
  receiveTimeout: 5000, // 5 seconds
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
));

 

ฟังก์ชัน _fetchPosts ยังใช้ queryParameters เพื่อระบุค่า userId สำหรับการเรียก API เพิ่มเติม ดังนี้

final response = await dio.get('/posts', queryParameters: {
  'userId': 1,
}, options: Options(
  headers: {
    'Authorization': 'Bearer token',
  },
));

 

สุดท้าย ฟังก์ชัน build จะใช้ ListView.builder เพื่อแสดงผลข้อมูลที่ได้จาก API ตามปกติ

 

 

 


 

เลือกโปรทำเว็บ เดือนมีนาคม

หนังสือพัฒนาตัวเอง

จุดเริ่มต้นที่ชัดเจน

เว็บไซต์หรือแอปพลิเคชั่นของคุณเริ่มต้นที่นี่

ลงทะเบียนแล้วเราจะส่งข้อเสนอที่ดีที่สุดให้กับคุณ